<template>
	<div class='sidebar' ref='sidebar' data-step="4" data-intro="这里是元件列表!">
		<div style="width:250px;height:92%">
			<!-- <div class="title">元件库</div> -->
			<div style="height:60px;background: transparent"></div>
			<!-- <div class="title-list" @click="goback">
                元件列表
                <i v-if="active" class="el-icon-arrow-left goback"></i>
                <i v-else class="el-icon-arrow-right goback"></i>
            </div> -->
			<div id="myPaletteDiv">
			</div>
			<div id="indentButton" @click="goback"></div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				active: true
			};
		},
		computed: {
			onRoutes() {}
		},
		created() {},
		mounted() {

		},
		methods: {
			goback() {
				if (this.active == true) {
					this.active = false;
					this.$refs.sidebar.style.left = "-220px";
					this.$refs.sidebar.style.transitionDuration = ".5s";
					this.$parent.toggleWidth2();
				} else {
					this.active = true;
					this.$refs.sidebar.style.left = "0px";
					this.$refs.sidebar.style.transitionDuration = ".5s";
					this.$parent.toggleWidth3();
				}

			}
		},
	};
</script>

<style scoped>
	.sidebar {
		overflow: hidden;
		width:250px;
		height:93%;
		display: block;
		position: absolute;
		left: 0;
		top: 60px;
		bottom: 0;
		background-image: url(../../assets/img/sideBack.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		transition-duration:.5s;
	}

	.sidebar::-webkit-scrollbar {
		width: 0;
	}

	.sidebar-el-menu:not(.el-menu--collapse) {
		width: 250px;
	}

	.sidebar>ul {
		height: 100%;
	}

	.title {
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		font-weight: 600;
		text-align: center;
		background: #c2dbf2;
		border-bottom: 1px solid #000;
	}

	.title-list {
		border-top: 1px solid #000;
		height: 20px;
		line-height: 20px;
		padding-left: 4px;
		background: #c2dbf2;
	}
	
	#myPaletteDiv {
		/* border: solid 1px black; */
		width: 250px;
		height: 98%;
		background: transparent;
	}
	
	#myPaletteDiv>>>canvas { outline: none; }
	#myPaletteDiv>>>div { overflow: hidden!important }
	
	#indentButton{
		position: absolute;
		width:30px;
		height: 140px;
		z-index:9;
		top:42%;
		margin-left:220px;
		background-image: url(../../assets/img/arrow_blue.png);
		background-size: 100% 100%;
		cursor: pointer;
	}
	#indentButton:hover{
		position: absolute;
		width:30px;
		height: 140px;
		z-index:9999;
		top:42%;
		margin-left:220px;
		background-image: url(../../assets/img/arrow_red.png);
		background-size: 100% 100%;
		cursor: pointer;
	}
</style>
